<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>check print</title>
	<link rel="stylesheet" type="text/css" href="/vendor/bootstrap-css/css/bootstrap.css">
	<script src="/vendor/mootools/dist/mootools-core.js"></script>
	<script src="/js/ejs.js"></script>
	<style>
		th {text-align: center;}
	</style>
</head>
<body>
	<script type="text/template" id="totalTable">
			<table class="table table-hover table-striped text-center ">
				<thead>
					<th>Total of uploaded photos</th>
					<th>Total of printed photos</th>
					<th>Total of access of share pages</th>
					<th>Total of emails been sent</th>
				</thead>
				<tbody>
					<td><%= data.photoTotal %></td>
					<td><%= data.printTotal %></td>
					<td><%= data.shares.length %></td>
					<td><%= data.emails.length %></td>
				</tbody>
			</table>
	</script>
	<header>
		<h1 class="text-center">Wephoto Event Data</h1>
	</header>
	<div class="container">
		<div class="row">
			<input class="form-control" id="eventId" type="text" placeholder="Input event id and enter">
		</div>
		<div class="row total-table clearfix" style="margin-top: 30px;">
		</div>
	</div>
	<script type="text/javascript">
		$('eventId').addEvent('keydown', function(e){
			if(e.key === 'enter'){
				var eventId = $(this).get('value').trim();
				var onsuccess = function(d){
					var tt_tpl = $('totalTable').get('html');
					var tt = ejs.render(tt_tpl, {data: d});

					document.getElement('.total-table').appendHTML(tt);
				}
				eventId = Number.from(eventId);
				if(!eventId)
					return
				new Request.JSON({
					'url': '/eventData/' + eventId,
					'onSuccess': onsuccess
				}).get();
			}
		});
	</script>
</body>
</html>